<template>
	<view class="container" ref="list">
		<view v-for="(item,idx) in messageList" :id="idx===(messageList.length-1)?'lastone':''" :class="['message',item.send===true?
		'receive':'reply']">
			<view class="avator" @click="goToDetail(item.uid)">
				<img :src="item.headImg" alt="">
			</view>
			<view class="content">
				<!-- <view class="nick-name">
					{{item.nickname}}
				</view> -->

				<view class="text">
					{{item.content}}
					<view v-if="item.state === 0 && item.isChoose === 1" class="btn-group">
						<view class="cancel" @click="changeState(item.id,2)">
							拒绝
						</view>
						<view class="agree" @click="changeState(item.id,1)">
							同意
						</view>
					</view>
				</view>
				<view class="time">
					{{item.createTime}}
				</view>
			</view>
		</view>
		<view class="bottom-tip">
			<span style="color:red">*</span>请勿在此页面发送个人联系方式，违反者将自行扣除缘分值！
		</view>
		<view class="input">
			<input class="uni-input" v-model="textVal" type="text" @confirm="sendMessage" confirm-type="send"
				placeholder="输入发送内容" />
			<view class="btn" @click="sendMessage">
				发送
			</view>
		</view>


	</view>
</template>

<script>
	import {
		url,
		request,
		login
	} from '@/service/api.js'
	export default {
		data() {
			return {
				id: '',
				textVal: '',
				messageList: [],
				pageSize: 50,
				pageNum: 1,
				loading: false
			};
		},
		onLoad(param) {
			console.log(param)
			this.id = param.conversationId
			uni.setNavigationBarTitle({
				title: param.nickname
			});
		},
		onShow() {
			this.init(this.id)
			request(url.getUnreadMsg,'GET').then(res=>{
				console.log('unread', res)
				if(res.data>0){
					uni.setTabBarBadge({
					  index: 3,
					  text: res.data?.toString()
					})
				}else{
					uni.removeTabBarBadge({
						index:3
					})
				}
			})
		},
		onPageScroll(e) {
			if (this.hasMore && e.scrollTop < 20) {
				this.loadMore()
			}
		},

		// mounted() {
		// 	window.addEventListener('scroll', (e) => {
		// 		console.log(e.target.scrollHeight)
		// 		if (this.hasMore && e.offsetTop) {

		// 		}
		// 	})
		// },
		methods: {
			sendMessage() {
				request(url.leaveMessage, 'GET', {
					content: this.textVal,
					conversationId: this.id
				}).then(res => {
					if (res.status === 200) {
						this.init(this.id)
					} else {
						uni.showToast({
							title: '留言失败，请稍后重试',
							icon: 'none'
						})
					}
				})
			},
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/PersonalDetail/PersonalDetail?uid=${id}`,
				})
			},
			init(id) {
				this.textVal = ''
				this.getMessageList(id)
			},
			loadMore() {
				if (this.loading) {
					return
				}
				this.loading = true;
				setTimeout(() => {
					this.loading = false
				}, 1500)
				console.log('jiazai')
				this.pageNum++;
				request(url.getMessageList, 'GET', {
					page: this.pageNum,
					limit: this.pageSize,
					conversationId: this.id
				}).then(res => {
					console.log(res)
					if (res.status === 200) {
						this.messageList = this.messageList.concat(res.data.reverse())
					} else {
						//err
					}
				})
			},
			// 消息审批 id为审批状态，1通过2拒绝
			changeState(msgId, state) {
				request(url.auditMsg, 'POST', {
					messageId: msgId,
					state: state
				}).then(res => {
					if (res.status === 200) {
						uni.showToast({
							title: '操作成功'
						})
						setTimeout(() => {
							this.init()
						}, 1500)
					} else {
						uni.showToast({
							title: res.msg
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg
					})
				})
			},
			getMessageList(id) {
				request(url.getMessageList, 'GET', {
					page: this.pageNum,
					limit: this.pageSize,
					conversationId: this.id
				}).then(res => {
					console.log(res)
					if (res.status === 200) {
						this.totalPage = res.totalPage
						this.messageList = res.data.reverse()
						this.$nextTick(() => {
							uni.pageScrollTo({
								scrollTop: 20000,
								duration: 0
							})
						})
					} else {
						//err
					}
				})
			},
		},
		computed: {
			hasMore() {
				return this.totalPage > this.pageNum
			}
		},
	}
</script>

<style lang="less" scoped>
	* {
		box-sizing: border-box;
	}

	.container {

		.avator {
			flex-shrink: 0;
			width: 50px;
			height: 50px;

			img {
				width: 100%;
				height: 100%;
				border-radius: 8px;
			}
		}

		padding: 10px 10px;
		padding-bottom: 100px;

		.message {
			display: flex;
			padding: 14px 0 10px 0;
			position: relative;
		}

		.nick-name {
			font-size: 13px;
			color: #333;
		}

		.time {
			font-size: 16px;
			color: #898989;
			position: absolute;
			left: 0;
			bottom: -10px;
			transform: scale(0.5);
		}

		.text {
			margin-left: 10px;
			width: 100%;
			font-size: 17px;
			padding: 14px;
			border-radius: 5px;
			background: #fff;
			width: fit-content;
			color: #4C4C4C;
			font-family: SimHei;

			.btn-group {
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-top: 1px solid #efefef;
				margin-top: 10px;
				padding-top: 10px;
				font-size: 14px;

				.cancel {
					border-right: 1px solid #efefef;
					text-align: center;
					width: 50%;
					color: #999;
				}

				.agree {
					text-align: center;
					width: 50%;
					color: #FC9380;
				}
			}
		}

		.content{
			user-select:auto;
		}
		.reply {
			flex-direction: row-reverse;

			.avator {
				margin-left: 10px;
			}

			.nick-name {}

			.time {
				right: 0;
				left: auto;
			}

			.text {
				margin-right: 10px;
				margin-left: 0px;
			}
		}

		.recieve {
			flex-direction: row;

			.avator {
				margin-right: 10px;
			}

			.text {}
		}
	}

	.bottom-tip {
		font-size: 11px;
		color: #aaa;
		text-align: center;
		position: fixed;
		bottom: 35px;
		height: 30px;
		background-color: #f5f5f5;
	}

	.input {
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 40px;

		.input-class {
			width: 85%;
		}

		.btn {
			width: 15%;
			padding: 5px;
			text-align: center;
			margin: 0 10px;
			border-radius: 4px;
			background-color:#ddd;
			color:#333
		}
		::v-deep{
			.uni-input{
				padding:0 12px;
				margin-left:12px;
			}
		}
	}
</style>
